<template>
    <div class="com-container">
        <div class="com-chart" ref="rank_ref"></div>
    </div>
</template>

<script setup>
import * as echarts from "echarts";
import {
    ref,
    onMounted,
    onUnmounted,
    inject,
    defineExpose,
    computed,
    watch,
} from "vue";
import { useStore } from "vuex";
const store = useStore();
let allData = ref(null);
let chartInstance = null;
const rank_ref = ref(null);
let startValue = 0;
let endValue = 9;
let timer = null;
import SocketService from "./../utils/socket_service";

//初始化
const initChart = () => {
    //挂载chart
    chartInstance = echarts.init(rank_ref.value, theme.value);
    /** @type EChartsOption */
    const initOption = {
        title: {
            text: "| 地区销售排行",
            left: 20,
            top: 20,
        },
        grid: {
            //坐标轴
            top: "40%",
            left: "10%",
            right: "10%",
            bottom: "5%",
            containLabel: true,
        },
        tooltip: {
            show: true,
        },
        xAxis: {
            type: "category",
        },
        yAxis: {
            type: "value",
        },
        series: [
            {
                type: "bar",
            },
        ],
    };
    chartInstance.setOption(initOption);
    chartInstance.on("mouseover", () => {
        clearInterval(timer);
    });
    chartInstance.on("mouseout", () => {
        console.log(123);
        startInterval();
    });
};
//更新
const getData = async (ret) => {
    // 获取数据
    // const { data: ret } = await inject("http").get("/api/rank");
    //allData排序
    allData.value = ret;
    allData.value.sort((a, b) => {
        return b.value - a.value;
    });
    // console.log(allData.value);
    upDataChart();
    startInterval();
};
//获取数据
const upDataChart = () => {
    const colorArr = [
        ["#0BA82C", "#4FF778"],
        ["#2E72BF", "#23E5E5"],
        ["#5052EE", "#AB6EE5"],
    ];
    const provinceArr = allData.value.map((item) => {
        //省份的数组
        return item.name;
    });
    //对应销售金额
    const valueArr = allData.value.map((item) => {
        return item.value;
    });
    // console.log(valueArr);
    /** @type EChartsOption */
    const dataOption = {
        xAxis: {
            data: provinceArr,
        },
        dataZoom: {
            show: false,
            startValue: startValue,
            endValue: endValue,
        },
        series: [
            {
                data: valueArr,
                itemStyle: {
                    // 渐变色
                    color: (arg) => {
                        //回调函数 arg 系列信息
                        let targetArr = null;
                        if (arg.value > 300) {
                            targetArr = colorArr[0];
                        } else if (arg.value > 200) {
                            targetArr = colorArr[1];
                        } else {
                            targetArr = colorArr[2];
                        }
                        return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                color: targetArr[0],
                            },
                            {
                                offset: 1,
                                color: targetArr[1],
                            },
                        ]);
                    },
                },
            },
        ],
    };
    chartInstance.setOption(dataOption);
};
//定时函数\
const startInterval = () => {
    if (timer) {
        clearInterval(timer);
    }
    timer = setInterval(() => {
        startValue++;
        endValue++;
        if (endValue > allData.value.length - 1) {
            startValue = 0;
            endValue = 9;
        }
        upDataChart();
    }, 2000);
};
// 响应式适配
const screenAdapt = () => {
    //标题文字
    const titleFontSize = rank_ref.value.offsetWidth * (66 / 1536);
    console.log(titleFontSize);
    /** @type EChartsOption */
    const adaptOption = {
        title: {
            textStyle: {
                fontSize: titleFontSize,
            },
        },
        series: [
            //圆角与宽度
            {
                barWidth: titleFontSize,
                itemStyle: {
                    borderRadius: [titleFontSize / 2, titleFontSize / 2, 0, 0],
                },
            },
        ],
    };
    chartInstance.setOption(adaptOption);
    chartInstance.resize();
};

// 回调函数注册
inject("SocketService").registerCallBack("rankData", getData);
onUnmounted(() => {
    inject("SocketService"), unRegisterCallBack("rankData");
});

onMounted(() => {
    initChart();
    // getData();
    inject("SocketService").send({
        action: "getData",
        socketType: "rankData",
        chartName: "rank",
        value: "",
    });
    window.addEventListener("resize", screenAdapt);
    screenAdapt();
});
onUnmounted(() => {
    window.removeEventListener("resize", screenAdapt);
    clearInterval(timer);
});

//更换主题
const theme = computed(() => {
    return store.state.theme;
});
watch(theme, () => {
    console.log("主题切换了");
    chartInstance.dispose(); //销毁当前图表
    initChart();
    SocketService.Instance.send({
        action: "getData",
        socketType: "rankData",
        chartName: "rank",
        value: "",
    });
    console.log(theme.value);
});

defineExpose({
    screenAdapt,
});
</script>

<style scoped>
</style>